import { Layout, Menu, Breadcrumb, Divider, BackTop } from 'antd';
import React, { Component, Fragment, useState, Suspense } from "react";
import { HashRouter as Router, BrowserRouter, Route, Link, Switch, Redirect, Prompt } from "react-router-dom";
import config from './config'
import ErrorBoundary from '../util/errorBoundary';
import LoadingPage from '../component/LoadingPage';

const { SubMenu } = Menu;
const { Header, Content, Sider, Footer, } = Layout;

// 布局头
const LayoutHeader = (
    <Header className="header" style={{ position: 'fixed', width: '100%' }}>
        <div className="logo" />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
            <Menu.Item key="1">nav 1</Menu.Item>
            <Menu.Item key="2">nav 2</Menu.Item>
            <Menu.Item key="3">nav 3</Menu.Item>
        </Menu>
    </Header>
)
//辅助菜单
const LayoutHeader2 = (
    <Breadcrumb style={{ margin: '10px 0' }}>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>List</Breadcrumb.Item>
        <Breadcrumb.Item>App</Breadcrumb.Item>
    </Breadcrumb>
)

// 递归生成菜单支持多层级
const renderSubMnenu = ({ title, key, child, icon, disvisible }) => {
    if (child) {
        return (
            <SubMenu key={key} title={title} icon={icon}>
                {
                    child.map(item => {
                        return renderSubMnenu(item)
                    })
                }
            </SubMenu>
        )
    } else {
        if (disvisible) {
            return null
        }
        return (
            <Menu.Item key={key} title={title} icon={icon}>
                <Link to={key}>{title}</Link>
            </Menu.Item>
        )
    }
}

// 生成菜单
const makeMenu = (config) => {
    return config && config.map(item => {
        return renderSubMnenu(item)
    })
}

// 针对每个路由包裹上错误边界
const wrapperComponent = Component => props => {
    return (
        <ErrorBoundary>
            <Suspense fallback={<LoadingPage />}>
                <Component {...props} />
            </Suspense>
        </ErrorBoundary>
    );
};

// 生成路由
const MakeRouter = ({ config }) => {
    const list = []
    // 内部方法
    const renderRouterList = ({ title, key, child, component, exact }) => {
        // 有child的就是菜单,不需要路由
        if (child) {
            return (
                child.map(item => {
                    return renderRouterList(item)
                })
            )
        } else {
            const warpComponent = wrapperComponent(component)
            list.push(<Route key={key} path={key} exact={exact} component={warpComponent} />)
        }
    }
    config.map(
        item => {
            return renderRouterList(item)
        }
    )
    return (
        <Suspense fallback={<h1>loading.....</h1>}>
            <Prompt message={(location, action) => {
                console.log("--location--", location, action, window.location.host)
                if (location.pathname == '/other/') {
                    return `您确定要前往${location.pathname}吗?`
                } else {
                    return true;
                }
            }} when={true} />
            <Switch>
                {list}
                <Route key="/404/" render={() => <h1>404......</h1>} ></Route>
                <Redirect from="/" to="/index" />
                <Redirect from="*" to="/404" />
            </Switch>
        </Suspense>
    )
}


// https://ant.design/components/layout-cn/
const Mylayout = () => {
    const [collapsed, setCollapsed] = useState(false) //菜单是否可折叠
    return (
        <Router>
            <Layout>
                <Sider
                    // className="site-layout-background"
                    collapsible
                    collapsed={collapsed}
                    onCollapse={setCollapsed}
                    // style={{ height: '100%', borderRight: 0 }}
                    style={{
                        overflow: 'auto',
                        height: '100%',
                        position: 'fixed',
                        left: 0,
                        // borderRight: 0
                    }}
                >
                    <div className="logo" />
                    <Menu
                        mode="inline"
                        theme="dark"
                        inlineIndent={10} // 菜单缩进宽度
                        // defaultSelectedKeys={['1']}
                        // defaultOpenKeys={['sub1']}
                        style={{ height: '100%', borderRight: 0 }}
                    >
                        {makeMenu(config)}
                    </Menu>
                </Sider>
                <Layout style={{ marginLeft: 200 }}>
                    {LayoutHeader}
                    {LayoutHeader2}
                    <Content
                        style={{ margin: '24px 16px 10px', overflow: 'initial', }}
                    >
                        <Divider>路由页面内容如下</Divider>
                        <MakeRouter config={config}></MakeRouter>
                        <Divider>路由页面内容如上</Divider>
                    </Content>
                    <BackTop>回到顶部</BackTop>
                    <Footer style={{ textAlign: 'center', }}>pro created by aleimu </Footer>
                </Layout>
            </Layout >
        </Router>
    )
}

export default Mylayout;